<template>
    <div id="login" class="loginRegister">
        <div class="login_content">
            <form id="loginForm">
                <div class="loginRegister_frame">
                    <div class="input_list">
                        <i class="iconfont icon-zhanghao fz22"></i>
                        <input type="text" name="accountTxt" placeholder="手机号/邮箱" />
                    </div>
                    <div class="input_list">
                        <i class="iconfont icon-mima"></i>
                        <input type="password" name="password" placeholder="密码" />
                        <i class="iconfont icon-yincangmima" id="isVisible" @click="isPasswordVisible($event)"></i>
                    </div>
                    <div class="login_href">
                        <router-link :to="{path:'/register'}" class="registerNow">立即注册</router-link>
                        <router-link :to="{path:'/forgetPassword'}" class="forgetPassword">忘记密码</router-link>
                    </div>
                </div>
                <div class="loginRegister_btn">
                    <button type="button" v-show="!isLoading" class="submit_btn" @click="submitForm('#loginForm')">登录</button>
                    <button type="button" v-show="isLoading" class="submit_btn">登录</button>
                </div>
            </form>
            <div class="login_way">
                <p class="login_line"><span>其他登录方式</span></p>
                <div class="login_several_way flexCenter">
                    <i class="iconfont icon-zhifubao"></i>
                    <i class="iconfont icon-weixin"></i>
                </div>
            </div>
        </div>
        <div class="error_warning">
            <span class="error_txt">
                账号不能为空
            </span>
        </div> 
        <div class="loading-toast" v-show="isLoading"><i class="iconfont icon-jiazai"></i><br/>加载中</div> 
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            "isVisible": false,   //密码不可见
            "isLoading": false
        }
    },
    created() {
	  
    },
    methods: {
        //密码是否可见
        isPasswordVisible(event) {
            var el = event.currentTarget;
            if(this.isVisible) {
                $(el).removeClass('icon-xianshimima').addClass('icon-yincangmima').prev('input').attr('type','password');                
            }else {
                $(el).removeClass('icon-yincangmima').addClass('icon-xianshimima').prev('input').attr('type','text'); 
            }
            this.isVisible = !this.isVisible;
        },
        //提交form
        submitForm(obj) {
            var that = this;
            var $account = $(obj).find('input[name="accountTxt"]'),
                $password = $(obj).find('input[name="password"]'),
                accountTxt = $.trim($account.val()),
                passwordTxt = $.trim($password.val());
            if(accountTxt == '') {
                this.utils.errorWarning('账号不能为空');
                return false;
            }
            if(passwordTxt == '') {
                this.utils.errorWarning('密码不能为空');
                return false;
            } 
            this.isLoading = true;
            $.ajax({
                url: "http://127.0.0.1:8081/flgr/services/login/doLogin",
                type: 'post',
                data: {
                    "loginName": accountTxt,
                    "passWord": passwordTxt
                },
                success: function(data) {
                    that.isLoading = false;
                    if(!data || !data.PortResponse) {
                        return false;
                    }
                    var data = data.PortResponse;
                    if(data && data.code == "ERROR") {
                        that.utils.errorWarning(data.msg);
                        return false;
                    }
                    if(data && data.code == "SUCCESS") {
                        that.$router.push({ name: 'getBackPassword', query: { account: accountTxt }})
                    }
                    
                },
                error: function(data) {
                    that.isLoading = false;
                    that.utils.errorWarning('登录失败');
                    return false;
                    console.log(data)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login_content {
    padding-top: 6.666667rem;
}
.loginRegister_frame {
    background: #fff;
    margin: 0 .4rem .8rem;
    border-radius: .213333rem;
    padding: 0 1.013333rem;
    .input_list {
        display: flex;
        padding: .4rem 0 .266667rem;
        border-bottom: 1px solid #ddd;
        i.iconfont#isVisible {
            right: 0;
        }
    }
    .login_href {
        display: flex;
        padding: .4rem 0;
        justify-content: space-between;
        a {
            color: #4A90E2;
            text-decoration: underline;
        }
    }
}
.login_way {
    padding: 0 .666667rem;
    .login_line {
        border-bottom: 2px solid #D9DAE1;
        text-align: center;
        height: 14px;
        margin: .8rem .533333rem;
        span {
            padding: 0 .4rem;
            background: #414568;
            color: #D9DAE1;
            font-size: .373333rem;
            line-height: 26px;
            // margin-top: -20px;
            display: inline-block;
        }
    }
    .login_several_way {
        .iconfont {
            width: 1.333333rem;
            height: 1.333333rem;
            text-align: center;
            line-height: 1.333333rem;
            border-radius: 100%;
            font-size: 1.013333rem;
            color: #fff;
            &.icon-zhifubao {
                background: #0D9FE8;
            }
            &.icon-weixin {
                background: #99DE63;
            }
        }              
    }
}
</style>
